import { Alert, Link, TextField } from '@aws-amplify/ui-react';

import { TextFieldDemo } from './demo';
import {
  DefaultRequiredTextFieldExample,
  DefaultTextAreaExample,
  DefaultTextFieldExample,
  RequiredTextFieldExample,
  TextAreaMaxLengthExample,
  TextAreaResizableExample,
  TextAreaRowsExample,
  TextAreaSizeExample,
  TextFieldAccessibilityExample,
  TextFieldDescriptiveTextExample,
  TextFieldEventHandlersExample,
  TextFieldInnerComponentsExample,
  TextFieldOuterAndInnerComponentsExample,
  TextFieldOuterComponentsExample,
  TextFieldSizeExample,
  TextFieldStatesExample,
  TextFieldStylePropsExample,
  TextFieldThemeExample,
  TextFieldValidationErrorExample,
  TextFieldVariationExample,
} from './examples';
import { Example, ExampleCode } from '@/components/Example';
import { Fragment } from '@/components/Fragment';
import { ComponentClassTable } from '@/components/ComponentClassTable';
import StandardHTMLAttributes from '@/components/StandardHTMLAttributes.mdx';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';

## Demo

<TextFieldDemo />

## Usage

Import the `TextField` component and styles and provide a `label` for accessibility/usability.

<Example>
  <DefaultTextFieldExample />
  <ExampleCode>
    ```jsx file=./examples/DefaultTextFieldExample.tsx

    ```

</ExampleCode>
</Example>

### Accessibility / Label behavior

<Fragment>{() => import('./../shared/formFieldAccessibility.mdx')}</Fragment>

<Example>
  <TextFieldAccessibilityExample />
  <ExampleCode>
    ```jsx file=./examples/TextFieldAccessibilityExample.tsx 
    
    ```

  </ExampleCode>
</Example>

### Sizes

TextField sizes are designed to match styling of other field components such as Buttons. There are three sizes: small, (default), and large.

<Example>
  <TextFieldSizeExample />
  <ExampleCode>
    ```jsx file=./examples/TextFieldSizeExample.tsx

    ```

  </ExampleCode>
</Example>

### Variations

There are two variation styles available: default and `quiet`.

<Example>
  <TextFieldVariationExample />
  <ExampleCode>
  ```jsx file=./examples/TextFieldVariationExample.tsx
  ```
  </ExampleCode>

</Example>

### Outer components

Compose field components such as `Button` and `Select` at the start or end of an TextField input using the `outerStartComponent` or `outerEndComponent` props.

<Example>
  <TextFieldOuterComponentsExample />
  <ExampleCode>
    ```jsx file=./examples/TextFieldOuterComponentsExample.tsx

    ```

  </ExampleCode>
</Example>

### Inner components (icons)

Compose `FieldGroupIcon` or `FieldGroupIconButton` components inside TextField input using innerStartComponent and innerEndComponent.
To create an interactive icon button, use the `FieldGroupIconButton` component. To add an icon that's not interactive, use `FieldGroupIcon` component.

Note: When clicked, `FieldGroupIcon` will focus the field, whereas the `FieldGroupIconButton` will trigger its `onClick` event.

<Example>
  <TextFieldInnerComponentsExample />
  <ExampleCode>
    ```jsx file=./examples/TextFieldInnerComponentsExample.tsx

    ```

  </ExampleCode>
</Example>

_You can also both inner and outer components together_

<Example>
  <TextFieldOuterAndInnerComponentsExample />
  <ExampleCode>
    ```jsx file=./examples/TextFieldOuterAndInnerComponentsExample.tsx

    ```

  </ExampleCode>
</Example>

### Descriptive text

To provide additional descriptive text of requirements of the field, use the `descriptiveText` field:

<Example>
  <TextFieldDescriptiveTextExample />
  <ExampleCode>
    ```jsx file=./examples/TextFieldDescriptiveTextExample.tsx

    ```

  </ExampleCode>
</Example>

### States

The available TextField states include `isDisabled` and `isReadOnly`. A disabled field will be not be focusable not mutable and will not be submitted with form data. A readonly field cannot be edited by the user.

<Example>
  <TextFieldStatesExample />
  <ExampleCode>
    ```jsx file=./examples/TextFieldStatesExample.tsx

    ```

  </ExampleCode>
</Example>

### Required fields

Use the `isRequired` prop to specify a required field.

<Example>
  <DefaultRequiredTextFieldExample />
  <ExampleCode>
    ```jsx file=./examples/DefaultRequiredTextFieldExample.tsx

    ```

  </ExampleCode>
</Example>

There is no default styling for required fields. Customize the `label` or `descriptiveText` to instruct the form user of the required field.

<Example>
  <RequiredTextFieldExample />
  <ExampleCode>
    ```jsx file=./examples/RequiredTextFieldExample.tsx

    ```

  </ExampleCode>
</Example>

### Validation error styling

Use the `hasError` and `errorMessage` props to mark a TextField as having a validation error.

<Example>
  <TextFieldValidationErrorExample />
  <ExampleCode>
    ```jsx file=./examples/TextFieldValidationErrorExample.tsx

    ```

  </ExampleCode>
</Example>

### Event handlers

TextField provides several event handlers: `onSelect`, `onInput`, `onChange`, `onCopy`, `onPaste`, and `onCut`. Open the console to interact with the demo below. 

<Example>
  <TextFieldEventHandlersExample />
  <ExampleCode>
    ```jsx file=./examples/TextFieldEventHandlersExample.tsx

    ```

  </ExampleCode>
</Example>

<StandardHTMLAttributes component="TextField" link="input" element="<input>">
  <Example>
    <TextField
      label="Name"
      placeholder="Galadriel"
      name="name"
    />

    <ExampleCode>

    ```jsx
    <TextField
      label="Name"
      placeholder="Galadriel"
      name="name"
    />
    ```

    </ExampleCode>

  </Example>
</StandardHTMLAttributes>

## CSS Styling

<ThemeExample component="TextField">
  <Example>
    <TextFieldThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/TextFieldThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="TextField" />

### Global styling

To override styling on all TextField primitives, you can set the Amplify CSS variables with the built-in `.amplify-textfield` class.

<Example>
  <TextField
    label="Globally styled field"
    className="globally-styled-textfield"
  />
  <ExampleCode>
    ```css
    /* styles.css */
    .amplify-textfield {
      --amplify-components-fieldcontrol-border-color: rebeccapurple;
    }
    ```
  </ExampleCode>
</Example>

### Local styling

To override styling on a specific TextField, you can use a class selector or style props.

_Using a class selector:_

<Example>
  <TextField className="custom-textfield-class" label="Square field" />
  <ExampleCode>
    ```css
    /* styles.css */
    .custom-textfield-class .amplify-input {
      border-radius: 0;
    }
    ```
  </ExampleCode>
</Example>

_Using style props:_

All style props will be applied to the [`Flex`](flex) wrapper of the `TextField`. To style the `input` of the `TextField`, you can pass a `inputStyles` prop with the style props you want to apply to the input.

<Example>
  <TextFieldStylePropsExample />
  <ExampleCode>
    ```jsx file=./examples/TextFieldStylePropsExample.tsx

    ```

  </ExampleCode>
</Example>